<template>
  <div class="hope_new">

    <div class="background_FirstCharge">
      <HeaderComponent title="" background='#00000000' color='#000000' image_='1' size='4.8vw' />
      <img :src="require('@/assets/images/hope_new/shouchong6yuan.png')" alt="" />
      <div class="prize">
        <div>
          <img :src="require('@/assets/images/hope_new/meiguihua.png')" alt="" />
          <img :src="require('@/assets/images/hope_new/meiguihua-zi.png')" alt="" />
        </div>
        <div>
          <img :src="require('@/assets/images/hope_new/touxiangkuang.png')" alt="" />
          <img :src="require('@/assets/images/hope_new/xinrentouxiangkuang-zi.png')" alt="" />
        </div>
      </div>
      <div class="Recharge" @click="torecharge">立即充值</div>
    </div>
    <div class="background_FirstCharge">
      <img :src="require('@/assets/images/hope_new/shouchon98yuan-biaoti.png')" alt="" />
      <div class="prize prize_">
        <div>
          <img :src="require('@/assets/images/hope_new/meiguihua.png')" alt="" />
          <img :src="require('@/assets/images/hope_new/meiguihua-zi.png')" alt="" />
        </div>
        <div>
          <img :src="require('@/assets/images/hope_new/touxiangkuang.png')" alt="" />
          <img :src="require('@/assets/images/hope_new/xinrentouxiangkuang-zi.png')" alt="" />
        </div>
        <div id="three_xiaoxio">
          <img :src="require('@/assets/images/hope_new/Littlebear.png')" alt="" />
          <img :src="require('@/assets/images/hope_new/xiaoxiojiajia.png')" alt="" />
        </div>
      </div>
      <div class="Recharge" @click="torecharge">立即充值</div>
    </div>
    <div class="activityRrules">
      <div>
        <span>1、每个用户仅限首次充值获得</span>
        <span>2、充值6元及以上均可获得以上装扮</span>
        <span>3、获得头像框和座驾可用于个人装扮</span>
        <span>4、玫瑰花在礼物背包可见，用于抢每日达人榜</span>
        <span>5、最终解释权归主办方所有{{ isiOS ? ",与苹果公司无关" : "" }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import wx from 'weixin-js-sdk'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
    components: {
        HeaderComponent
    },
    setup() {
        const isiOS = ref<boolean>((window as any).isiOS ? true : false)
        const torecharge = (): void => {
            if ((window as any).isWeixin) {
            wx.miniProgram.navigateTo({
                url: "/pages/recharge/recharge",
            });
            } else {
            if ((window as any).isiOS) {
                (window as any).webkit.messageHandlers.pageJumpRecharge.postMessage({});
            } else {
                (window as any).app.pageJumpRecharge();
            }
            }
        }
        return {
            torecharge,
            isiOS
        }
    }
})
</script>

<style lang="less" scoped>
@import './HopeNew.less';
</style>